<template>
	<block v-if="isLogin">
		<view class="cart_box" v-if="buffer">
			<view class="cart_head">
				<view class="cart_menu">
					<text>全部(20)</text>
					<text>降价(4)</text>
					<text>常卖(2)</text>
					<text>分类</text>
				</view>
				<view class="cart_ticket">
					<!-- 此处使用checkbox是因为支付宝switch没有checkbox类型 -->
					<!-- <switch type="checkbox" :checked="true" color="#ff6040"  /> -->
					<checkbox color="#FF6040" value="true" />
					<text class="cart_ticket_text1">小U自营</text>
					<text class="cart_ticket_text2">以免运费 |</text>
					<text class="cart_ticket_text3">领券</text>
				</view>
			</view>

			<view class="container">
				<view class="top">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0" v-for="(item,index) in cartList"
						:key="index">
						<view class="cartInfo" id="demo1">
							<!-- 明日来写购物车基本信息 -->
							<view class="cartInfochild">
								<!-- 选择框 -->
								<view class="cartInfo_switch common">
									<!-- 点击当前商品 -->
									<!-- <checkbox-group>
										<checkbox color="#FF6040" :checked="item.status==1?true:false" value="1" />
									</checkbox-group> -->

									<switch type="checkbox" @change="oneChecked(index,$event)"
										:checked="item.status==1?true:false" color="#ff6040" />
								</view>
								<!-- 图片 -->
								<view class="cartInfo_image common">
									<image :src="item.img" mode="widthFix"></image>
								</view>

								<!-- 信息 -->
								<view class="cartInfo_info">
									<label style="font-size: 32rpx;" class="title">{{item.goodsname}}</label>
									<label style="font-size: 24rpx; color: #ccc;">规格：不错的商品</label>
									<label style="font-size: 20rpx; color: #FF6040;">比加入降低￥100</label>
									<label style="color:#FF6040;">￥
										<text style="font-size: 40rpx;color:#FF6040;">{{item.price}}
										</text>
									</label>
								</view>
								<!-- 加减数量 -->
								<view class="cartInfo_num">
									<view class="cartInfo_num_child">
										<label @click="del(item.id,index)">－</label>
										<label>{{item.num}}</label>
										<label @click="add(item.id,index)">＋</label>
									</view>
								</view>
							</view>

						</view>
						<view class="cartDel" id="demo2" @click="remove(item.id,index)">
							<label for="">删除</label>
						</view>
					</scroll-view>
				</view>

				<!-- 底部 -->
				<view class="foot">
					<view class="footd1">
						<!-- <checkbox-group @change="_allChecked">
							<checkbox color="#FF6040" value="1" :checked="allChecked" :name='allChecked' />
						</checkbox-group> -->
						<switch type="checkbox" :checked="allChecked" @change='_allChecked' color="#ff6040" />
						<label>全选</label>
					</view>
					<view class="footd2">
						<view class="footd2sp1">合计：<label style="color: #FF6040;">￥ {{allPrice}}</label></view>
						<label class="footd2sp2">不含运费，已优惠￥0.00</label>
					</view>
					<!-- 跳到提交订单，结算页面 -->
					<view class="footd3" hover-class="touchOpacity" @click="goOrder">
						<!-- 被选中的商品的个数 -->
						<label>去结算( {{allNum}} )</label>
					</view>
				</view>

			</view>
		</view>
		<!-- 无数据提示 -->
		<view v-else>
			<cartnull />
		</view>
	</block>
	<view v-else class="loginBox">
		<button class="login" @click="goLogin">去登录</button>
	</view>
</template>

<script>
	// 引入数据为空提示组件
	import cartnull from '@/components/cartnull/cartnull.vue';
	export default {
		components: {
			cartnull
		},
		data() {
			return {
				cartList: [], //初始化购物车数据
				buffer: true, //检测购物车是否有数据
				isLogin: false, //登录状态
				allChecked: true, //全选状态
				// oneChecked:false//单选状态
				_allPrice: 0, //总价格
				_allNum: 0 //总数量
			}
		},
		// 页面显示时
		async onShow() {

			// 判断是否登录
			// 登录
			if (this.$store.state.userInfo) {
				let {
					uid,
					token
				} = this.$store.state.userInfo;
				// 修改登录状态
				this.isLogin = true;
				// 更改数据状态
				this.buffer = true;
				// 请求购物车列表
				let res = await this.$http({
					url: '/cartlist',
					data: {
						uid,
					},
					header: {
						authorization: token
					}
				})
				// 判断购物车列表是否有数据
				// 有数据
				if (res.data.list) {
					this.cartList = res.data.list;
					this.cartList.forEach(item => {
						item.img = this.$baseUrl + item.img;
					})
					// 修改图片路径
					// console.log(this.cartList);
					// 更改数据状态
					this.buffer = true

				} else {
					// 没有数据
					this.buffer = false
				}
				// 初始化全选状态判断全选状态
				this.allChecked = this.cartList.every(item => {
					return item.status
				})

			} else {
				console.log('未登录');
				// 未登录
				// 更改数据状态
				this.buffer = false
			}
		},
		computed: {
			// 总价格
			allPrice() {
				let price = 0; //总价格初始值
				this.cartList.filter(item => {
					if (item.status) {
						price += item.num * item.price
					}
				})
				return price;
			},
			//总数量 
			allNum() {
				let num = 0; //总数量初始值
				this.cartList.filter(item => {
					if (item.status) {
						num += item.num
					}
				})
				return num
			}
		},
		methods: {
			// 跳转订单页面
			goOrder() {
				// console.log(this._allPrice);

				// 选中的商品数据
				let list = this.cartList.filter(item => {
					return item.status
				})
				console.log(list);
				// 如果没有选中的商品  不能跳转订单页
				if (list.length == 0) {
					uni.showToast({
						title: '您还没有选中商品',
						icon: 'none'
					})
					return
				}
				// 将购物车商品存储在本地
				uni.setStorageSync('cartList', list)
				uni.navigateTo({
					// 总价格  总数量  购物车数据id:goodsid 
					url: '/pages/order/order',
					// url: '/pages/order/order?countmoney=' + this._allPrice + '&countnumber=' + this._allNum,

				})
			},
			// 跳转登录页面
			goLogin() {
				uni.navigateTo({
					url: '/pages/phoneLogin/phoneLogin'
				})
			},
			// 数量+
			async add(id, index) {
				let res = await this.$http({
					url: '/cartedit',
					method: 'post',
					data: {
						id,
						type: 2
					},
					header: {
						authorization: this.$store.state.userInfo.token
					}

				})
				// console.log(res);
				// 添加成功
				if (res.data.code == 200) {
					this.cartList[index].num++;
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'error'
					})
				}
			},
			// 数量减
			async del(id, index) {
				this.cartList[index].num--;
				if (this.cartList[index].num < 1) {
					this.cartList[index].num = 1;
					return;
				}
				let res = await this.$http({
					url: '/cartedit',
					method: 'post',
					data: {
						id,
						type: 1
					},
					header: {
						authorization: this.$store.state.userInfo.token
					}
				})

				// 删除成功
				if (res.data.code == 200) {
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'error'
					})
				}

			},
			// 全选
			_allChecked(e) {
				// e.detail.value  获取全选状态
				this.allChecked = e.detail.value;
				this.cartList.forEach(item => {
					item.status = this.allChecked
				})
			},
			// 单选
			oneChecked(index, e) {
				this.cartList[index].status = e.detail.value
				this.allChecked = this.cartList.every(item => {
					return item.status
				})
			},
			// 删除
			async remove(id, index) {
				// 视图删除
				this.cartList.splice(index, 1);
				// 从数据库中删除
				let res = await this.$http({
					url: '/cartdelete',
					method: 'post',
					data: {
						id,
					},
					header: {
						authorization: this.$store.state.userInfo.token
					}
				})
				// 删除成功
				if (res.data.code == 200) {
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					})
				} else {
					// 删除失败
					uni.showToast({
						title: res.data.msg,
						icon: 'error'
					})
				}
				// 判断购物车是否还有数据  没有数据显示空结构
				let result = await this.$http({
					url: '/cartlist',
					data: {
						uid: uni.getStorageSync('userInfo').uid,
					},
					header: {
						authorization: uni.getStorageSync('userInfo').token
					}
				})
				// 判断购物车列表是否有数据  没有数据显示空结构
				if (!result.data.list) {
					this.buffer = false;
				}


			}
		}
	}
</script>

<style scoped>
	/* 引入样式文件 */
	/* @import url("@/static/css/cart.css"); */
	.loginBox {
		display:
			/* flex;
		height: 100%;
		align-items: center; */
	}

	.login {
		width: 20%;
	}

	checkbox-group {
		display: inline-block;
	}

	.cart_box {
		background-color: #f2f2f2;
		height: 80vh;
	}

	.cart_box .cart_head {
		height: 136rpx;
		width: 100%;
		position: fixed;
		top: var(--window-top);
		left: 0;
		z-index: 2;
	}

	.cart_head .cart_menu {
		height: 64rpx;
		width: 100%;
		background: linear-gradient(#FF6040, #FF8A80);
		display: flex;
		justify-content: space-around;
		align-items: center;

	}

	.cart_head .cart_menu text {
		font-size: 28rpx;
		color: #FFF3F2;
	}

	.cart_head .cart_menu .active {
		color: #FFFFFF;
		font-size: 32rpx;
	}

	.cart_head .cart_ticket {
		position: relative;
		background-color: white;
		width: 100%;
		height: 72rpx;
	}

	.cart_head .cart_ticket checkbox {
		position: absolute;
		top: 10rpx;
		left: 20rpx;
	}

	.cart_head .cart_ticket .cart_ticket_text1 {
		position: absolute;
		top: 10rpx;
		left: 100rpx;
		font-size: 32rpx;
		color: #333333;
	}

	.cart_head .cart_ticket .cart_ticket_text2 {
		position: absolute;
		top: 20rpx;
		right: 100rpx;
		font-size: 24rpx;
		color: #333333;
	}

	.cart_head .cart_ticket .cart_ticket_text3 {
		position: absolute;
		top: 20rpx;
		right: 40rpx;
		font-size: 24rpx;
		color: #FF6040;
	}

	.scroll-view_H {
		white-space: nowrap;
		display: flex;
		width: 100%;
		height: 256rpx;
		/* 	border: 1rpx solid #F1F1F1; */
	}

	.container {
		overflow: hidden;
	}

	.top {
		margin-bottom: 180rpx;
		margin-top: 156rpx;
	}

	.cartInfo {
		padding-top: 25rpx;
		/* padding: 25rpx 20rpx 0; */
		height: 256rpx;
		width: 750rpx;
		display: inline-block;
		/* 靠上 */
		vertical-align: top;
		background-color: white;
		/* box-sizing: border-box; */
	}

	.cartDel {
		height: 256rpx;
		width: 110rpx;
		background: #FF6040;
		display: inline-block;
		text-align: center;
		line-height: 256rpx;
		color: #FFFFFF;
	}

	.title {
		width: 135%;
		/* 将多余文本装成省略号 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

	}

	/* 隐藏滚动条 */
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.cartInfo_image image {
		width: 216rpx;
		height: 216rpx;
	}

	.cartInfochild {
		display: flex;
		height: 200rpx;

	}

	.cartInfo_info {
		display: flex;
		flex-direction: column;
		width: 320rpx;
		padding-left: 20rpx;
	}

	/* #ifndef MP-ALIPAY */
	.cartInfo_info label {
		margin-top: 15rpx;
	}

	/* #endif */

	.cartInfo_info text:nth-of-type(2) {
		font-size: 20rpx;
		color: #999999;
		text-decoration: line-through;
	}

	.cartInfo_switch {
		width: 90rpx;
	}

	.cartInfo_image {
		width: 216rpx;
	}

	.common {
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}



	/* 加减数量 */
	.cartInfo_num_child {
		margin-top: 134rpx;
		/* border: 2rpx solid #AAAAAA; */
		border-radius: 10rpx;
		height: 50rpx;
		width: 150rpx;
		display: flex;
	}

	.cartInfo_num_child label {
		/* flex: 1; */
		line-height: 40rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	.cartInfo_num_child label:nth-of-type(2) {
		background-color: #F2F2F2;
		width: 80rpx;
		height: 40rpx;
		font-size: 20rpx;
		font-weight: normal;
	}

	/* 底部 */

	.foot {
		width: 100%;
		height: 100rpx;
		border-top: 1px solid #F1F1F1;
		position: fixed;
		bottom: var(--window-bottom);
		background: #FFFFFF;
		display: flex;
	}

	.footd1 {
		width: 200rpx;
		height: 100%;
		line-height: 100rpx;
		padding-left: 20rpx;
	}

	.footd2 {
		width: 300rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.footd2sp2 {
		font-size: 20rpx;
		color: #999999;
	}

	.footd3 {
		width: 230rpx;
		height: 100%;
		background: #FF6040;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.cartInfo_image_img {
		width: 120rpx;
		height: 120rpx;
	}
</style>